<template>
  <div class="article">
    <header class="header">
      <h3>待审核</h3>
      <el-input v-model="search" placeholder="输入关键字" />
    </header>

    <!-- table -->
    <el-table :data="table.data" highlight-current-row style="width: 100%">
      <el-table-column type="selection" align="center" width="50" />
      <el-table-column prop="create_time" label="日期" width="160" sortable />
      <el-table-column prop="userName" label="作者" width="180" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="tag" label="标签" width="260">
        <template #default="scope">
          <el-tag
            type="success"
            disable-transitions
            v-for="(item, index) in scope.row.tag"
            :key="index"
            :style="{ marginRight: 10 + 'px' }"
          >
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="详情" align="center" width="80">
        <template #default="scope">
          <el-link type="warning " icon="paperclip" @click.stop="gotoArticleDetail(scope.$index)">查看</el-link>
        </template>
      </el-table-column>

      <!-- 自定义 -->
      <el-table-column label="操作" align="center" width="140">
        <template #default="scope">
          <el-button size="small" type="success" plain @click="handlePass(scope.row)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- footer -->
    <footer class="footer">
      <el-pagination small background layout="prev, pager, next, sizes, total, jumper" :total="100" />
    </footer>

    <!-- articleDetail -->
    <ArticleDetail :articleData="table.data[currentArticleIndex]" ref="articleDetail" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue"
import Http from "@/utils/http.js"
import ArticleDetail from "@/components/ArticleDetail.vue"
import { articleList } from "@/mock/articleList.js"
import { ElMessage } from "element-plus"
import { async } from "q"

let search = ref("")
const artiles = JSON.parse(JSON.stringify(articleList))
const table = reactive({
  data: artiles,
})

// 通过
const handlePass = async (articleData) => {
  const { id } = articleData
  try {
    // const { data: res } = await Http.post("/test", { articleId: id })
    // console.log(res)
    // if (res.status !== 200) return ElMessage({ type: "error", message: "出错了" })

    table.data = table.data.filter((article) => article.id !== id)
    ElMessage({ type: "success", message: "已审核" })
  } catch (err) {
    console.error(err)
    ElMessage({ type: "error", message: "服务器异常，请重试" })
  }
}

// goto 文章详情
let currentArticleIndex = ref(0)
const articleDetail = ref(null)
const gotoArticleDetail = (index) => {
  currentArticleIndex.value = index
  articleDetail.value.dialogVisible = true
}

// 获取全部待审核文章
const getAllReviewArticle = async () => {
  const { data: res } = await Http.post("/test")
  console.log(res)
  table.data = res.data
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.article {
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
  padding: 0 20px;

  .header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 50px;
    border-bottom: 1px solid #e4e7ed;
    // padding: 0 20px;

    > h3 {
      color: #606266;
    }

    ::v-deep .el-input {
      margin-left: auto;
      width: 20%;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
  }
}
</style>
